<template>
  <div class="table">
    <advance-table
      :columns="columns"
      :data-source="dataSource"
      :loading="loading"
      rowKey="kitId"
      @search="onSearch"
      @refresh="onRefresh"
      :format-conditions="true"
      @reset="onReset"
      :pagination="{
        current: page,
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        showLessItems: true,
        showQuickJumper: true,
        showTotal: (total, range) =>
          `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
        onChange: onPageChange,
        onShowSizeChange: onSizeChange,
      }"
    >
      <template slot="title">
        <a-button>新增</a-button>
      </template>
      <!--   <template slot="statusTitle">
        状态<a-icon style="margin: 0 4px" type="info-circle" />
      </template> -->
      <template slot="send" slot-scope="{ text }">
        {{ text ? "是" : "否" }}
      </template>
      <template slot="status" slot-scope="{ text }">
        {{ text | statusStr }}
      </template>

      <template slot="action">
        <span>
          <a>详情</a>
          <a-divider type="vertical" />
          <a>编辑</a>
          <a-divider type="vertical" />
          <a>删除</a>
        </span>
      </template>
    </advance-table>
  </div>
</template>

<script>
import AdvanceTable from "@/components/table/advance/AdvanceTable";
import { dataSource as ds } from "@/services";

export default {
  name: "Table",
  components: { AdvanceTable },
  filters: {
    statusStr(val) {
      switch (val) {
        case 1:
          return "已下单";
        case 2:
          return "已付款";
        case 3:
          return "已审核";
        case 4:
          return "已发货";
      }
    },
  },
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          title: "序号",
          customRender(_, __, index) {
            return index + 1;
          },
        },
        {
          title: "试剂盒名称",
          dataIndex: "kitName",
          searchAble: true,
        },
        {
          title: "组分数",
          dataIndex: "samplingType",
          customRender(_) {
            return ["未知", "1人份", "2人份", "3人份"][_ !== null ? _ : 0];
          },
        },
        {
          title: "采样类型",
          dataIndex: "samplingType",
          customRender(_) {
            return [
              "未知",
              "血斑",
              "唾液斑",
              "汗斑",
              "精斑",
              "毛发",
              "烟蒂",
              "骨骼",
              "牙齿",
              "脱落上皮细胞",
              "其他",
            ][_ !== null ? _ : 10];
          },
        },
        {
          title: "来源",
          dataIndex: "source",
          customRender(_) {
            if (_ !== null) {
              return _;
              /*  return document.createElement("a", {
                props: {
                  href: _,
                  text: _,
                },
              }); */
            } else {
              return "-";
            }
          },
        },
        {
          title: "创建人",
          dataIndex: "createdBy",
          searchAble: true,
          customRender(_) {
            if (_ !== null) {
              return _;
            } else {
              return "-";
            }
          },
        },
        {
          title: "创建时间",
          dataIndex: "createdTime",
          customRender(_) {
            if (_ !== null) {
              return _;
            } else {
              return "-";
            }
          },
        },
        {
          title: "操作",
          key: "action",
          slot: "action",
          /*  customRender: (value) => {
            const see = {
              children: this.$createElement(
                "a",
                {
                  class: "col-tit",
                  on: {
                    click: () => {
                      console.log("查看被点击", value);
                    },
                  },
                },
                ["查看"]
              ),
            };
            const edit = {
              children: this.$createElement(
                "a",
                {
                  class: "col-tit",
                  on: {
                    click: () => {
                      console.log("编辑被点击", value);
                    },
                  },
                },
                ["编辑"]
              ),
            };
            return see, edit;
          }, */
          /*  customRender() {
            return (
              <span>
                <a>详情</a>
                <a-divider type="vertical" />
                <a>编辑</a>
                <a-divider type="vertical" />
                <a>删除</a>
              </span>
            );
          }, */
        },
        /*  {
          searchAble: true,
          dataIndex: "status",
          dataType: "select",
          slots: { title: "statusTitle" },
          scopedSlots: { customRender: "status" },
          search: {
            selectOptions: [
              { title: "已下单", value: 1 },
              { title: "已付款", value: 2 },
              { title: "已审核", value: 3 },
              { title: "已发货", value: 4 },
            ],
          },
        },
        {
          title: "发货",
          searchAble: true,
          dataIndex: "send",
          dataType: "boolean",
          scopedSlots: { customRender: "send" },
          search: {
            switchOptions: {
              checkedText: "开",
              uncheckedText: "关",
            },
          },
        }, 
        {
          title: "审核时间",
          dataIndex: "auditTime",
          dataType: "time",
        },*/
      ],
      dataSource: [],
      conditions: {},
    };
  },
  created() {
    this.getGoodList();
  },
  methods: {
    getGoodList() {
      this.loading = true;
      const { page, pageSize, conditions } = this;
      ds.queryKitInfoList({ page, pageSize, ...conditions }).then((result) => {
        const { list, pages, pageSize, total } = result.data;
        this.dataSource = list;
        this.page = pages;
        this.total = total;
        this.pageSize = pageSize;
        this.loading = false;
      });
    },
    onSearch(conditions, searchOptions) {
      console.log(searchOptions);
      this.page = 1;
      this.conditions = conditions;
      this.getGoodList();
    },
    onSizeChange(current, size) {
      this.page = 1;
      this.pageSize = size;
      this.getGoodList();
    },
    onRefresh(conditions) {
      this.conditions = conditions;
      this.getGoodList();
    },
    onReset(conditions) {
      this.conditions = conditions;
      this.getGoodList();
    },
    onPageChange(page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      this.getGoodList();
    },
  },
};
</script>

<style scoped lang="less">
.table {
  background-color: @base-bg-color;
  padding: 24px;
}
</style>